<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>表格查询</title>
		<link rel="stylesheet" href="../js/layui/css/layui.css">
		<link rel="stylesheet" href="../css/x-admin.css" media="all">
	</head>
	<body>
		 <div class="x-nav">
            <span class="layui-breadcrumb">
              <a href="javascript:;">首页</a>
              <a  href="javascript:;">会员管理</a>
              <a  href="javascript:;"><cite>会员列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新">
            	<i class="layui-icon" style="line-height:30px">ဂ</i>
            </a>
        </div>
		
		  <div class="x-body">
		  	 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>查询条件</legend>
			 </fieldset>
			 <form class="layui-form x-center" action="" >
	                <div class="layui-form-pane" style="margin-top: 15px;">
	                  <div class="layui-form-item">
	                    <label class="layui-form-label">日期</label>
	                    <div class="layui-input-inline">
					      <input type="text" id="date" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
					    </div>
	                    <label class="layui-form-label">用户名</label>
	                    <div class="layui-input-inline">
	                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
	                    </div>
	                  
					    <label class="layui-form-label">单行选择框</label>
					    <div class="layui-input-inline">
					      <select name="interest" lay-filter="aihao">
					        <option value=""></option>
					        <option value="0">写作</option>
					        <option value="1" selected="">阅读</option>
					        <option value="2">游戏</option>
					        <option value="3">音乐</option>
					        <option value="4">旅行</option>
					      </select>
					    </div>
					  </div>
					  <div class="layui-form-item">
					  	 <label class="layui-form-label">日期</label>
	                    <div class="layui-input-inline">
					      <input type="text" id="date" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
					    </div>
	                    <label class="layui-form-label">用户名</label>
	                    <div class="layui-input-inline">
	                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
	                    </div>
					    <label class="layui-form-label">选择框</label>
					    <div class="layui-input-inline">
					      <select name="interest" lay-filter="aihao">
					        <option value=""></option>
					        <option value="0">写作</option>
					        <option value="1" selected="">阅读</option>
					        <option value="2">游戏</option>
					        <option value="3">音乐</option>
					        <option value="4">旅行</option>
					      </select>
					    </div>
					    <div class="layui-input-inline" style="width:80px">
	                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
	                    </div>
					  </div>	
	                </div> 
	            </form>
	         <table class="layui-table" id="demo" lay-data="{height:332, url:'../json/table.json', page:true, id:'idTest'}" lay-filter="demo">
				  <thead>
				    <tr>
				      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
				      <th lay-data="{field:'username', width:80}">用户名</th>
				      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
				      <th lay-data="{field:'city', width:80}">城市</th>
				      <th lay-data="{field:'sign', width:177}">签名</th>
				      <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
				      <th lay-data="{field:'score', width:80, sort: true}">评分</th>
				      <th lay-data="{field:'classify', width:80}">职业</th>
				      <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
				      <th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}"></th>
				    </tr>
				  </thead>
				</table>
		  </div>  
		  
		<script src="http://pagead2.googlesyndication.com/pagead/js/r20170828/r20170110/show_ads_impl_single_load.js"></script><script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
	</body>
	<script type="text/javascript" src="../js/layui/layui.js"></script>
	<script type="text/javascript" src="../js/utils.js"></script>
	<script>
		 layui.use(['element','form', 'laydate','table','layer'], function(){
		 	var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
		 	    form = layui.form,
		 	    table = layui.table,
		 	    laydate = layui.laydate;
			  
			  //日期
			laydate.render({
			    elem: '#date'
			});
			
		
		
		  table.on('tool(demo)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'detail'){
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		      x_admin_show('编辑','list_edit.html','','300');
		    }
		  });
		 })
	</script>
</html>
